<template>
    <div>
        <el-steps :active="active" simple>
            <el-step title="验证身份" icon="el-icon-user-solid"></el-step>
            <el-step title="绑定邮箱" icon="el-icon-mobile-phone"></el-step>
            <el-step title="完成" icon="el-icon-circle-check"></el-step>
        </el-steps>
        <!-- 第一步 -->
        <div class="content_one" v-if="active === 1">
            <div class="title">为确认是您本人操作，请完成以下验证</div>
            <el-form ref="forgotForm" :model="sizeForm" size="mini" :rules="changeRiles" label-width="135px"
                label-position="left">
                <el-form-item label="已绑定的手机">
                    <div class="phone">{{ showPhone }}</div>
                </el-form-item>
                <el-form-item prop="Verification" label="短信验证码">
                    <el-tooltip class="item" effect="dark" content="请输入验证码" placement="right-end"
                        popper-class="popperClass">
                        <el-input v-model.trim="sizeForm.Verification" placeholder="请输入验证码" style="width: 30%;" />
                    </el-tooltip>
                    <el-button class="verify-btn" size="medium" @click="sendValidationOne">{{ validation }}</el-button>
                </el-form-item>
                <el-button type="primary" class="primary" @click="clickforgotOne">下一步</el-button>
            </el-form>
        </div>

        <!-- 第二步 -->
        <div class="content_one" v-if="active === 2">
            <el-form ref="TwoForm" :model="TwoForm" size="mini" :rules="changeRilesTwo" label-width="135px"
                label-position="left">

                <el-form-item prop="valideEmail" label="绑定邮箱" key="0">
                    <el-tooltip class="item" effect="dark" content="请输入您的邮箱" placement="right-end"
                        popper-class="popperClass">
                        <el-input v-model.trim="TwoForm.valideEmail" placeholder="请输入您的邮箱" style="width: 75%;"></el-input>
                    </el-tooltip>
                </el-form-item>

                <el-form-item prop="Verification" label="邮箱验证码" key="1">
                    <el-tooltip class="item" effect="dark" content="请输入邮箱验证码" placement="right-end"
                        popper-class="popperClass">
                        <el-input v-model.trim="TwoForm.Verification" placeholder="请输入邮箱验证码" style="width: 30%;" />
                    </el-tooltip>
                    <el-button class="verify-btn" size="medium" @click="sendValidationTwo">{{ twoValidation }}</el-button>
                </el-form-item>

                <el-button type="primary" class="primary" @click="clickforgotTwo">下一步</el-button>
            </el-form>
        </div>

        <!-- 第三步 -->
        <div class="content_three" v-if="active === 3">
            <div class="succsess"></div>
            <div>
                <h2>修改成功！</h2>
            </div>
            <el-button type="primary" class="primary" @click="complete">完成</el-button>
        </div>
    </div>
</template>

<script>
import { getVerificationCodeRequest, regVerificationCodeRequest, getEamilCodeForEmailRequest, bindingEmailRequest } from '@/api/user'
export default {
    name: 'GenescloudUiChangeEmail',
    props: {
        bindingPhone: {
            type: String,
            default: ''
        },
        isEmail: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        //手机号屏蔽
        showPhone() {
            let left = this.bindPhone.substring(0, 3)
            let right = this.bindPhone.substring(this.bindPhone.length - 3)
            return left + '****' + right
        },
    },
    data() {
        return {
            active: 1,
            bindPhone: this.bindingPhone,
            //第一步
            sizeForm: {
                Verification: '',
            },
            timer: null,
            validation: '发送验证码',
            countdown: 60,
            changeRiles: {
                Verification: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { pattern: /^[0-9]{6}$/, message: '请输入6位验证码', trigger: ['change', 'blur'] }
                ]
            },

            //第二步
            TwoForm: {
                valideEmail: '',
                Verification: '',
            },
            twoTimer: null,
            twoValidation: '发送验证码',
            twoCountdown: 60,
            changeRilesTwo: {
                valideEmail: [
                    { required: true, message: '请输入您的邮箱', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, message: '请输入正确的邮箱地址', trigger: 'blur' },
                ],
                Verification: [
                    { required: true, message: '请输入邮箱验证码', trigger: 'blur' }
                ]
            }
        };
    },

    mounted() {
        // console.log(this.isEmail);
    },

    methods: {
        async sendValidationOne() {
            if (!this.timer) {
               try{
                const res = await getVerificationCodeRequest({
                    mobilePhone: this.bindingPhone,
                    validCodeTypeName: this.isEmail ? 'phone_modify_email' : 'phone_bind_email'
                })
                if (res.code !== 200) return this.$message.error(res.message)
                this.validation = `60s后重新发送`;
                this.timer = setInterval(() => {
                    if (this.countdown > 0 && this.countdown <= 60) {
                        this.countdown--;
                        if (this.countdown !== 0) {
                            this.validation = `${this.countdown}s后重新发送`;
                        } else {
                            clearInterval(this.timer);
                            this.validation = "重新发送";
                            this.countdown = 60;
                            this.timer = null;
                            this.codeDisabled = false;
                        }
                    }
                }, 1000)
               }catch(error){
                 this.$message.error('系统错误，请联系管理员！')
               }
            }
        },
        clickforgotOne() {
            this.$refs['forgotForm'].validateField(['Verification'], async err => {
                if (!err) {
                   try{
                    const res = await regVerificationCodeRequest({
                        mobilePhone: this.bindingPhone,
                        validCode: this.sizeForm.Verification,
                        validCodeTypeName: this.isEmail ? 'phone_modify_email' : 'phone_bind_email'
                    })
                    if (res.code !== 200) return this.$message.error(res.message)
                    this.active = 2
                   }catch(error){
                     this.$message.error('系统错误，请联系管理员！')
                   }
                }
            })
        },
        //验证码校验
        sendValidationTwo() {
            if (!this.twoTimer) {
                this.$refs['TwoForm'].validateField(['valideEmail'], async err => {
                    if (!err) {
                       try{
                        const res = await getEamilCodeForEmailRequest({
                            email: this.TwoForm.valideEmail,
                            mobilePhone: this.bindingPhone,
                            validCode: this.sizeForm.Verification,
                            validCodeTypeName: this.isEmail ? 'email_modify_bind' : 'email_bind'
                        })
                        if (res.code !== 200) {
                            return this.$message({
                                message: res.message,
                                type: 'warning'
                            });
                        } else {
                            this.twoValidation = `60s后重新发送`;
                            this.twoTimer = setInterval(() => {
                                if (this.twoCountdown > 0 && this.twoCountdown <= 60) {
                                    this.twoCountdown--;
                                    if (this.twoCountdown !== 0) {
                                        this.twoValidation = `${this.twoCountdown}s后重新发送`;
                                    } else {
                                        clearInterval(this.twoTimer);
                                        this.twoValidation = "重新发送";
                                        this.twoCountdown = 60;
                                        this.twoTimer = null;
                                        this.codeDisabled = false;
                                    }
                                }
                            }, 1000)

                        }
                       }catch(error){
                         this.$message.error('系统错误，请联系管理员！')
                       }
                    }
                })
            }
        },
        clickforgotTwo() {
            this.$refs['TwoForm'].validate(async validate => {
                if (validate) {
                    try{
                        const res = await bindingEmailRequest({
                        email: this.TwoForm.valideEmail,
                        emailValidCode: this.TwoForm.Verification,
                        mobilePhone: this.bindingPhone,
                        phoneValidCode: this.sizeForm.Verification,
                        validCodeTypeName:this.isEmail?'email_modify_bind':'email_bind'
                    })
                    if (res.code !== 200) return this.$message.error(res.message)
                    this.active = 3
                    }catch(error){
                         this.$message.error('系统错误，请联系管理员！')
                    }
                }
            })
        },
        complete() {
            this.active = 1
            this.clear()
            this.$emit('complete', 'email')
        },
        clear() {
            this.active = 1
            this.sizeForm = {
                Verification: ''
            }
            clearInterval(this.timer)
            this.timer = null
            this.validation = '发送验证码'
            this.countdown = 60
            this.TwoForm = {
                valideEmail: null,
                Verification: null,
            }
            clearInterval(this.twoTimer)
            this.twoTimer = null
            this.twoValidation = '发送验证码'
            this.twoCountdown = 60
            if (this.$refs.forgotForm) this.$refs.forgotForm.resetFields()
            if (this.$refs.TwoForm) this.$refs.TwoForm.resetFields()
        }
    },
};
</script>

<style lang="scss" scoped>
.content_one {
    padding: 15px 150px;
    font-size: 15px;

    .title {
        margin-bottom: 25px;
    }

    ::v-deep .el-form-item--mini .el-form-item__label {
        font-weight: 400;

        &::before {
            content: ''
        }
    }

    ::v-deep .el-input--mini .el-input__inner {
        border-radius: 5px;
        height: 36px;
    }

    .verify-btn {
        float: right;
        margin-right: 28%;
        border-radius: 6px;
    }

    .primary {
        margin-left: 135px;
        border-radius: 5px
    }
}

.content_three {
    display: flex;
    flex-direction: column;
    align-items: center;

    .succsess {
        width: 100px;
        height: 100px;
        background: url(../../../../assets/success.png) no-repeat;
        background-size: 100px;
        margin: 12px 0;
    }

    h2 {
        padding-left: 15px;
    }

    .primary {
        border-radius: 5px
    }
}
</style>